<template>
    <vol-box :lazy="true" v-model="modelOpen" title="选择打印模板" :width="800" :padding="5" :onModelClose="onModelClose">
        <template v-if="!loadingShow">
            <ul class="coutent" v-if="printTemplateID.length">
                <li v-for=" item in printTemplateID" :key="item.ID" @click="TemplateNameBtn(item.ID,item)">{{
                    item.TemplateName
                    }}</li>
            </ul>
            <p class="coutent titel" v-else> 无可用打印模板</p>
        </template>
        <div class="Loading"  v-if="loadingShow">
            <el-button type="primary" loading text>加载中</el-button>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="modelOpen = false" style="width: 100px;">取 消</el-button>
            </div>
        </template>
    </vol-box>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
    components: {
        "vol-box": VolBox,
    },
    data() {
        return {
            modelOpen: false,
            ID: "",
            routeName: "",
            row: null,
            printTemplateID: [],
            loadingShow: true
        };
    },
    methods: {
        onModelClose() { },
        open(routeName, row) {
            this.ID = row.Stock_in
            this.routeName = routeName
            this.row = row
            this.modelOpen = true
            if(this.printTemplateID.length>0)return;
            this.getPrintTemplateList(routeName)
        },
        getPrintTemplateList(routeName) {
            this.loadingShow=true
            let url = "api/q_print_options/GetPrintTemplateList?Menu=" + routeName
            this.http.get(url, {}, "").then(reslut => {
                // console.log("reslut", reslut)
                this.loadingShow=false
                if (JSON.stringify(reslut) == "{}") {
                    return
                }
                if (reslut.length > 0) {
                    this.printTemplateID = reslut
                } else {
                    this.base.ElMessageFn(reslut.message)
                }
            })
        },
        TemplateNameBtn(TemplateID,item) {
            try {
                console.log("item",item)
                if(item.TemplateName.indexOf("二维码")!= -1){
                    // 这是打印二维码
                    const href = this.$router.resolve({
                        path: `/Print`,
                        query: { TemplateID: TemplateID, row: JSON.stringify(this.row), routeName: this.routeName,QR:true},
                    }).href;
                    window.open(href, "_blank");
                    return;
                }
                const href = this.$router.resolve({
                    path: `/Print`,
                    query: { TemplateID: TemplateID, row: JSON.stringify(this.row), routeName: this.routeName },
                }).href;
                window.open(href, "_blank");
            } catch (error) {
                console.error(error);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.Loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
.coutent.titel{
    display: flex;
    justify-content: center;
    align-items: center;
}
.coutent {
    list-style: none;
    min-height: 200px;

    li {
        float: left;
        width: 25%;
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px;
        cursor: pointer;
    }

    li:nth-child(4n) {
        padding-right: 0px;
    }

    li:hover {
        color: #409eff;
    }
}
</style>